# Componentes
Los componentes son los elementos fundacionales del sistema de diseño. Los productos se construyen como combinación de componentes, que permiten crear una consistencia visual y funcional a lo largo de todo el producto.
Cada componente resuelve una necesidad de interfaz específica. Los componentes son objetos estándar en todos los sistemas de diseño, aunque en el SDSS hemos estructurado, definido y construido estos de la manera más adecuada para las necesidades de la Seguridad Social.
La librería de componentes es dinámica y va incorporando nuevos elementos según las necesidades de los distintos productos de la Seguridad Social.
Los principales componentes del SDSS son:
| Botón / Button
[imagen 1] | Enlace / Link
[imagen 2] | Caja de Texto / Text input
[Imagen 3] |
| :-----------------------------------------------: | :-------------------------------------------------------: | :------------------------------------------------: |
| **Caja numérica / Number input**
[imagen 4] | **Botón de radio / Radio Button**
[imagen 5] | **Casilla / Checkbox**
[imagen 6] |
| **Selector desplegable / Select**
[imagen 7] | **Etiqueta / Tag**
[imagen 8] | **Descriptor emergente / Tooltip**
[imagen 9] |
| **Lista / List**
[imagen 10] | **Lista estructurada / Structured list**
[imagen 11] | **Pestañas / Tabs**
[imagen 12] |
| **Desplegable / Dropdown**
[imagen 13] | **Tarjeta / Tile / Card**
[imagen 14] | **Paginado / Pagination**
[imagen 15] |
La descripción, definición y construcción los componentes es la piedra angular del SDSS. Estos componentes son comunes para toda la Seguridad Social, aunque cada solución o producto puede customizarlos a medida según sus necesidades mediante los temas. Por consistencia se recomienda que se mantenga una línea homogénea a lo largo de todos los productos de la Seguridad Social.
Para cada componente se detallará su uso en la documentación asociada, la descripción de su diseño y su codificación propia dentro del tema. Típicamente, la información de cada componente comprende los siguientes apartados:
- **Descripción**. Como comienzo de la definición de cada componente, se describe qué es cada componente y para qué sirve. También se dan indicaciones de cuándo se ha de usar este componente, y cuándo no.
- **Variaciones**. Se detallan distintas versiones del mismo componente, bien por su aplicación en distintas funciones, por distintos tamaños… con su diferenciación visual y de uso.
- **Contenido**. Se definen los textos que se emplean en el componente, identificándolos y detallando su sintaxis. Se incluyen recomendaciones para la forma y redacción de los mismos.
- **Anatomía**. Se representa la estructura del componente desde su morfología. Se muestra visualmente los tamaños y espacios de los elementos del componente para todos sus formatos.
- **Posición**. Se dan recomendaciones sobre la situación del componente dentro de otros componentes o patrones.
- **Comportamiento**. Se definen las interacciones del usuario con el componente, sobre todo la activación del mismo. Se detallan los posibles valores que puede tomar un componente y sus estados.
- **Tokens**. Se listan los elementos y propiedades del componente, indicando los tokens usados para su definición. Se clasifican los tokens según su tipificación en color, tipografías o estructura.